<template>
    <div>
        <!-- 视频 -->
        <div class="head">
            <div class="head-div">
                <div class="head-left">
                    <img src="../assets/left.png" alt="" @click="previous" />
                </div>
            </div>
        </div>
        <div style="background-color: white;">
            <div id="banners">
                <div class="banner">
                    <img :src="`https://wwz.jingyi.icu${rowitem.img}`" alt="">
                </div>
            </div>
        </div>
        <!-- 主题评论 -->
        <div id="content">
            <h3 id="tit">
                {{ rowitem.title }}
            </h3>
            <div id="title_top">
                <img :src="`https://wwz.jingyi.icu${rowitem.avatar}`" alt="" />
                <p id="name">{{ rowitem.name }}</p>
                <p id="time">{{ rowitem.create_time }}</p>
            </div>
            <div class="content_child">
                {{ rowitem.introduce }}
            </div>
        </div>
        <!-- 附属评论 -->
        <div id="ping_lun">
            <h3>评论</h3>
            <p @click="optionsbu">全部{{ Introcom_list.length }}条</p>
        </div>
        <!-- 评价区域 -->

        <div class="lio" v-for="(item, index) in Introcom_list" :key="item.id" @click="xiangxi">
            <div class="lio-child">
                <div class="lio-head">
                    <div class="img-back"> <img :src="`https://wwz.jingyi.icu${item.img}`" @error="handleImageError"
                            alt="" /></div>
                    <div class="column">
                        <div class="flex">
                            <div>{{ Introcom_list.name }}</div>
                            <div style="color: rgba(128, 128, 128, 1);">{{ item.create_time }}</div>
                        </div>
                        <div class="run">打分
                            <div class="xing">
                                <div class="xing">
                                    <img src="../assets/xingxing.png" alt="" />
                                    <img src="../assets/xingxing.png" alt="" />
                                    <img src="../assets/xingxing.png" alt="" />
                                    <img src="../assets/xingxing.png" alt="" />
                                    <img src="../assets/ban.png" alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="eate">
                    {{ item.content }}
                </div>
                <div class="imgs">
                    <img :src="`https://wwz.jingyi.icu${item.avatat}`" alt="" class="background_image" />
                </div>
                <div class="row">
                    <div style="font-size: 13px;">浏览1000</div>
                    <div><img style="width:15px;height:15px;" src="../assets/right.png" alt="" /></div>
                </div>
            </div>
        </div>
        <!-- 添加评论 -->
        <div id="tplun">
            <div class="tplun_one">
                添加评论...
            </div>
            <div class="tplun_two">
                <div>
                    <img src="../assets/love.png" alt="" />
                    <span class="absous">66</span>
                </div>
                <div>
                    <img src="../assets/pentagram.png" alt="" />
                    <span class="absous">66</span>
                </div>
                <div>
                    <img src="../assets/待评价.png" alt="" />
                    <span class="absous">66</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, watch, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { Introcom, intro } from "../api/intro"
// 攻略id
const Raider_ID = JSON.parse(sessionStorage.getItem('Raider_ID'));
// console.log(Raider_ID);
// 攻略下标
const gldata = sessionStorage.getItem('gldata');
// console.log(gldata);
// 攻略一行
const rowitem = JSON.parse(sessionStorage.getItem('rowitem'))
console.log(rowitem, '攻略一行数据');
// 攻略评论数据
const Introcom_list = ref([])
Introcom({
    intri_id: Raider_ID,
}).then((res) => {
    console.log(res, '攻略评论数据');
    Introcom_list.value = res.data
    console.log(Introcom_list.value);
})  
const defaultImageUrl = '../assets/640 (58).jpg'
// 替换图片
function handleImageError(event) {
    console.log('图片加载失败:', event.target.src)
    // console.log(event.target, '123');
    // event.target.src = defaultImageUrl;
    // console.log(this.defaultImageUr);
}
// // 攻略数据
// const intro_list = ref([])
// intro().then((res) => {
//     console.log(res, '攻略数据')
//     intro_list.value = res.data
//     console.log(intro_list.value);
// })
// 返回攻略详情
const previous = () => {
    router.go(-1) 
}
</script>

<style scoped>
/* 顶部返回 */
.head {
    width: 100%;
    padding-bottom: 6.5px;
    padding-top: 6.5px;
    height: 28px;
    z-index: 11;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(0, 0, 0, 0.1);
}

.head-text {
    font-size: 13px;
    color: rgba(80, 80, 80, 1);
}

.head-left img {
    width: 15px;
    height: 15px;
}

.head-left {
    background-color: rgba(49, 49, 49, 0.6);
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 3vh;
    height: 25px;
    width: 25px;
}

.head-div {
    padding-left: 10px;
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#max_box {
    width: 100%;
    height: 180px;
    background-color: red;
}

.banner {
    width: 100%;
    height: 220px;
}

.banner img {
    width: 100%;
    height: 100%;
}


#aot>li>div {
    width: 100%;
    height: 180px;
    position: relative;
}

#aot>li>div>div {
    position: absolute;
    width: 96%;
    font-size: 13px;
    padding: 1% 2%;
    bottom: 0%;
    color: white;
    background-color: rgba(64, 56, 52, 0.5);
}

/* <!-- 主题评论 --> */
#tit {
    margin: 10px 15px;
}

#title_top {
    width: 70%;
    display: flex;
    align-items: center;
    margin-left: 15px;
}

#title_top>img {
    width: 40px;
    height: 40px;
    border-radius: 25px;
    margin-right: 5px;
}

#title_top>p {
    margin-right: 5px;
    font-size: 12px;
}

.content_child {
    font-size: 12px;
    margin: 10px 15px;
}

/* 附属评论 */
#ping_lun {
    display: flex;
    justify-content: space-between;
    width: 92%;
    margin-left: 4%;
    padding-bottom: 10px;
    border-bottom: 2px solid #f4f4f4;
}


.lio-head {
    display: flex;
    display: flex;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
    width: 90%;
    padding-left: 6.5px;
    font-size: 13px;
}

.lio-child {
    padding-right: 2vh;
    padding-left: 2vh;
    padding-bottom: 3vh;
}

.img-back {
    background-color: gray;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-back img {
    width: 40px;
    height: 40px;
    border-radius: 25px;
}

/* 星星 */
.xing {
    display: flex;
    width: 2vh;
    height: 2vh;
    padding-left: 0.5vh;
}

.run {
    display: flex;
    align-items: center;
}

.lio {
    width: 96%;
    margin: 0 auto;
    background-color: white;
    padding-top: 10px;
    border-radius: 6px;
    margin-top: 10px;
}

.eate {
    font-size: 13px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.background_image {
    width: 32%;
    height: 15vh;
}

.imgs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 6.5px;
}

.support {
    width: 2vh;
    height: 2vh;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #F4F4F4;
    padding-bottom: 1.5vh;
}

.row-right {
    display: flex;
    align-items: center;
    padding-right: 0.3vh;
    width: 15%;
    justify-content: space-between;
}

.ping {
    display: flex;
    align-items: center;
    padding-top: 2vh;
    justify-content: space-between;
}

.ping img {
    width: 2vh;
    height: 2vh;
}

.ping-zi {
    font-size: 13px;
}

.flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

#ping_lun>p {
    font-size: 12px;
}

/* 添加评论 */
#tplun {
    width: 100%;
    height: 40px;
    background-color: white;
    border-top: 2px solid #efefef;
    position: fixed;
    bottom: 0%;
    display: flex;
    justify-content: space-around;
}

.tplun_one {
    width: 30%;
    height: 25px;
    background-color: #E5E5E5;
    border-radius: 20px;
    color: #505050;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    margin-top: 7.5px;
}

.tplun_two {
    width: 45%;
    height: 20px;
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
}

.tplun_two>div {
    height: 100%;
    width: 30%;
    position: relative;
}

.tplun_two>div>span {
    font-size: 12px;
    position: absolute;
    top: -38%;
    left: 45%;
}

.tplun_two img {
    width: 22px;
    height: 22px;
}
</style>